window.addEventListener('load', function () {
    let tbody = this.document.querySelector('tbody')
    let btnaddmodal = this.document.querySelector('.btnaddmodal')
    let provinceEle = this.document.querySelector(' [name="province"]')
    let cityEle = this.document.querySelector(' [name="city"]')
    let countyEle = this.document.querySelector(' [name="county"]')
    let form = this.document.querySelector('.add-form')
    let btnAdd = this.document.querySelector('.btnAdd')
    //姓名
    let name = document.querySelector('[name="name"]')
    //年龄
    let age = document.querySelector('[name="age"]')
    //组
    let group = document.querySelector('[name="group"]')
    //性别
    let sexs = document.querySelectorAll('[name="sex"]')
    //手机
    let phone = document.querySelector('[name="phone"]')
    //薪资
    let salary = document.querySelector('[name="salary"]')
    //实际薪资
    let truesalary = document.querySelector('[name="truesalary"]')
    function init() {
        axios({
            url: '/student/list',
        }).then(({ data: { data } }) => {
            // console.log(data);
            let htmlStr = ``
            data.forEach(function (value, index) {
                htmlStr += ` <tr>
                                    <th scope="row">${index + 1}</th>
                                    <td>${value.name}</td>
                                    <td>${value.age}</td>
                                    <td>${value.sex}</td>
                                    <td>${value.group}</td>
                                    <td>${value.phone}</td>
                                    <td>${value.salary}</td>
                                    <td>${value.truesalary}</td>
                                    <td>${value.province + value.city + value.county}</td>
                                    <td>
                                    <button type="button" data-id='${value.id}' class="btn btn-primary btn-sm btnedit">修改</button>
                                    <button type="button" data-id='${value.id}' class="btn btn-danger btn-sm btndel">删除</button>
                                    </td>
                                </tr>`
            })
            tbody.innerHTML = htmlStr
        })
    }
    init()

    //学员添加
    //省市级联
    //加载省的数据
    axios({
        url: '/geo/province'
    }).then(res => {
        // console.log(res);
        let htmlStr = `  <option selected value="">--省--</option>`
        res.data.forEach(function (value) {
            htmlStr += ` <option  value="${value}">${value}</option>`
        })
        provinceEle.innerHTML = htmlStr
    })


    //获取市的数据
    provinceEle.addEventListener('change', function () {
        let pname = provinceEle.value
        // provinceEle.innerHTML = `  <option selected value="">--省--</option>`
        cityEle.innerHTML = ` <option selected value="">--市--</option>`
        countyEle.innerHTML = '<option selected value="">--县--</option>'
        if (!pname) {
            cityEle.innerHTML = '<option selected value="">--市--</option>'
            return
        }
        axios({
            url: '/geo/city',
            params: { pname }
        }).then(res => {
            // console.log(res);
            let htmlStr = ` <option selected  value="">--市--</option>`
            res.data.forEach(function (value) {
                htmlStr += `  <option  value="${value}">${value}</option>`
            })
            cityEle.innerHTML = htmlStr
        })
    })
    //加载区的数据
    cityEle.addEventListener('change', function () {
        let pname = provinceEle.value
        let cname = cityEle.value

        countyEle.innerHTML = '<option selected value="">--县--</option>'
        // 如果没有选择具体的省，则不进行数据的加载
        if (!cname) {
            return
        }
        axios({
            url: '/geo/county',
            params: { pname, cname }
        }).then(res => {
            let htmlstr = '<option selected value="">--县--</option>'
            res.data.forEach(function (value) {
                htmlstr += `<option value="${value}">${value}</option>`
            })
            countyEle.innerHTML = htmlstr
        })
    })
    //弹出模态框
    btnaddmodal.addEventListener('click', function () {
        $('#addModal').modal('show')
        btnAdd.innerHTML = '确认添加'
        addModalLabel.innerHTML = '录入新学员'
    })
    function student() {
        return {
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: '姓名不能为空'
                        },
                        stringLength: {
                            min: 2,
                            max: 10,
                            message: '姓名长度2~10位'
                        }
                    }
                },
                age: {
                    validators: {
                        notEmpty: {
                            message: '年龄不能为空'
                        },
                        greaterThan: {
                            value: 18,
                            message: '年龄不能小于18岁'
                        },
                        lessThan: {
                            value: 60,
                            message: '年龄不能超过60岁'
                        }
                    }
                },
                sex: {
                    validators: {
                        choice: {
                            min: 1,
                            max: 1,
                            message: '请选择性别'
                        }
                    }
                },
                group: {
                    validators: {
                        notEmpty: {
                            message: '组号不能为空'
                        },
                        regexp: {
                            regexp: /^\d{1,2}$/,
                            message: '请选择有效的组号'
                        }
                    }
                },
                phone: {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        regexp: {
                            regexp: /^1\d{10}$/,
                            message: '请填写有效的手机号'
                        }
                    }
                },
                salary: {
                    validators: {
                        notEmpty: {
                            message: '实际薪资不能为空'
                        },
                        greaterThan: {
                            value: 800,
                            message: '期望薪资不能低于800'
                        },
                        lessThan: {
                            value: 100000,
                            message: '期望薪资不能高于100000'
                        }
                    }
                },
                truesalary: {
                    validators: {
                        notEmpty: {
                            message: '实际薪资不能为空'
                        },
                        greaterThan: {
                            value: 800,
                            message: '实际薪资不能低于800'
                        },
                        lessThan: {
                            value: 100000,
                            message: '实际薪资不能高于100000'
                        }
                    }
                },
                province: {
                    validators: {
                        notEmpty: {
                            message: '省份必填'
                        }
                    }
                },
                city: {
                    validators: {
                        notEmpty: {
                            message: '市必填'
                        }
                    }
                },
                county: {
                    validators: {
                        notEmpty: {
                            message: '县必填'
                        }
                    }
                }
            }
        }
    }
    //实现添加
    $('.add-form')
        .bootstrapValidator(student())
        .on('success.form.bv', function (e) {
            e.preventDefault()
            // 收集用户数据
            let formdata = new FormData(form)
            let data = {}
            formdata.forEach(function (value, key) {
                data[key] = value
                // console.log(data[key]);
            })
            axios({
                url: '/student/add',
                method: 'post',
                data
            }).then(res => {
                toastr.success(res.data.message)
                $('#addModal').modal('hide')
                init()
            })
        })



    let newid
    //删除 委托事件
    tbody.addEventListener('click', function (e) {
        if (e.target.classList.contains('btndel')) {

            if (confirm('请问是否要删除')) {
                let id = e.target.dataset.id

                // console.log(id);
                axios({
                    url: '/student/delete',
                    method: 'DELETE',
                    params: {
                        id
                    }
                }).then(res => {
                    // console.log(res);
                    if (res.data.code == 0) {
                        toastr.success(res.data.message)
                        init()
                    }
                })
            }
        }
    })

    //学员编辑 委托事件
    tbody.addEventListener('click', function (e) {
        if (e.target.classList.contains('btnedit')) {
            $('#addModal').modal('show')
            btnAdd.innerHTML = '确认编辑'
            addModalLabel.innerHTML = '编辑学员'
            let id = e.target.dataset.id
            newid = id
            axios({
                url: '/student/one',

                params: { id }
            }).then(({ data: { data } }) => {
                console.log(data);
                name.value = data.name
                age.value = data.age
                phone.value = data.phone
                salary.value = data.salary
                truesalary.value = data.truesalary
                //单选按钮
                data.sex == '男' ? (sexs[0].checked = true) : (sexs[1].checked = true)
                //下拉列表
                provinceEle.value = data.province
                cityEle.innerHTML = ` <option selected value="">${data.city}</option>`
                countyEle.innerHTML = `<option selected value="">${data.county}</option>`

            })
        }
    })





})

